<template>
   <div class="rechargelist">
    <wxc-minibar title="提现记录">
          <!-- <image slot="left" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/back_icon.png"  style="height:28px;width:16px;" @click="back()"></image> -->
          <!-- <text style="font-family: PingFangSC-Medium;font-size: 34px;color: #fff;" slot="middle">提现记录</text> -->
    </wxc-minibar>
    <div>
         <scroller class="scroller" style="position:fixed;top:90px;bottom:0;left:0;right:0;background-color: #F5F5F5;">
            <div class="rechargelist_item" v-for="(item,index) in depositlist" :key="index">
                <!-- <div class="rechargelist_item_fl">
                   <div class="rechargelist_item_fl_first">
                       <text :class="[item.status == 'FAILURE'?'fail':'nofail']">{{item.name}}</text>
                        <text style="font-size: 28px;color: #A7A7A7;margin-top:8px;">{{item.money}}元</text>
                   </div>
                </div> -->
                  <div class="rechargelist_item_fl">
                   <div class="rechargelist_item_fl_first">
                     <text class="rechange_titletxt">{{item.detail}}</text>
                   </div>
                   <div class="rechargelist_item_fl_second">
                       <text style="font-size: 24px;color: #A7A7A7;">提现</text>
                   </div>
                </div>
                   <div class="rechargelist_item_fr">
                    <text class="recharge_rmb">-{{item.money | fixed}}</text>
                     <text class="recharge_time">{{item.createTime | filtertime}}</text>
                </div>
                <!-- <div class="rechargelist_item_fr">
                   <div class="rechargelist_item_fl_second">
                       <text style="font-size: 24px;color: #A7A7A7;">流水号{{item.rechargeOrderId}}</text>
                       <text style="font-size: 24px;color: #A7A7A7;margin-top:8px;">{{item.createTime | filtertime}}申请</text>
                   </div>
                </div> -->
            </div>
            <div class="norecord" v-if="depositlist.length==0">
               <image style="width:298.5px;height:298.5px;" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/norechargerecord.png"></image>
               <text style="font-size: 40px;color: #9E8383;margin-top:75.7px;">暂无提现记录</text>
            </div>
            <loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
                <rotate></rotate>
              <!-- <loading-indicator class="indicator"></loading-indicator> -->
            </loading>
         </scroller>
       </div>
    
   </div>
</template>

<script>
	import WxcMinibar from "@/components/modules/wxc-minibar/index.js"
	const modal = weex.requireModule("modal");
	const navigator = weex.requireModule('navigator')
	import { getBaseUrl, serialize }  from "@/utils/index.js"
    import { postResponsesToken } from '@/api.js'
    import rotate from "@/components/modules/rotate";
	export default {
	data() {
		return {
            depositlist:[],
            current:1,
            size:10,
            
            arr:[{
                status: 'REVIEWING',
                money:'50',
                id:1,
                createTime:'2018-10'
            },{
                status: 'REVIEWING',
                money:'50',
                id:1,
                createTime:'2018-10'
            },{
                status: 'REVIEWING',
                money:'50',
                id:1,
                createTime:'2018-10'
            },{
                status: 'REVIEWING',
                money:'50',
                id:1,
                createTime:'2018-10'
            }],
            loadinging:false,
            baseURL: '',
            loadingState:false
		};
	},
	components:{
        WxcMinibar,
        rotate
	},
	filters:{
		filtertime(time) {
            let iarr = ['周日','周一','周二','周三','周四','周五','周六']
            let date = new Date(+time)
            
            let formatNum = (num) => { return num < 10 ? "0" + num : num.toString() }

            return `${ date.getFullYear() }-${formatNum(date.getMonth() + 1)}-${ formatNum(date.getDate())}`
        },
         fixed(value) {
            return String(value).indexOf('.') ? Number(value).toFixed(2) : value+'.00'
        },
    },
    
	mounted() {
		this.getresposeData()

	},
	methods: {
		back(){
		    navigator.pop()
		},
		onloading(event) {
            if(this.loadingState) return ;
            this.loadinging = true;
            this.current ++
            this.getresposeData()
		},
		async getresposeData(){

			var param = {
                current:this.current,
                size: this.size,
                type:2
            }
            
            let iarr = [{
                    'IN': '充值',
                    'OUT': '提现'
                },{
                    'IN': '中奖奖金',
                    'OUT': '购彩'
                },{
                    'IN': '误发奖操作，已撤',
                    'OUT': '误发奖操作'
                },{
                    'IN': '撤单退款',
                    'OUT': '其他'
                },{
                    'IN': '增加保底金额',
                    'OUT': '退还保底金额'
                },{
                    'IN': '其他',
                    'OUT': ''
                }
            ]

            let res =  await postResponsesToken('cash/maccount/cashHistory', param)
           
			if (res.code == 0) {
                this.loadingState = res.data.All.length < this.size
                this.depositlist = this.depositlist.concat(res.data.All)

                this.depositlist.map((item)=>{
                    item.name = iarr[+item.status][item.direction]
                })

                this.loadinging = false
			} else {
			    modal.toast({ message: res.msg })
            }
            
		},
	}
	};
</script>

<style scoped>
.rechange_titletxt{
  font-size: 32px;
  color:#333333;
}
.loading{
    width: 750px;
    display: flex;
    align-items: center;
}
.recharge_time{
  color:#999;
  margin-top:5px;
  font-size:26px;
}
.recharge_rmb{
  color:#333333;
  font-size:36px;
}
  .rechargelist{
      position: relative;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #F5F5F5;
  }
  .fail{
    font-family: PingFangSC-Medium;
    font-size: 32px;
    color: #888888;
  }
  .nofail{
    font-family: PingFangSC-Medium;
    font-size: 32px;
    color: #333333;
  }
  .rechargelist_item{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 160px;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: rgb(245,245,245);
      background-color: white;
  }
  .rechargelist_item_fl{
      margin-left: 32px;
  }
  .rechargelist_item_fr{
      margin-right: 32px;
  }
  .rechargelist_item_fl_second{
      margin-top: 8px;
      display: flex;
      align-items: center;
      flex-direction: row;
  }
  .loading {
    width: 750px;
    height: 100px;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    background-color: #333;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    background-color: #f5f5f5;
    }
  .indicator-text {
    color: #888888;
    font-size: 20px;
    text-align: center;
  }
  .indicator {
    margin-top: 16px;
    height: 40px;
    width: 40px;
    color: gray;
  }
  .norecord{
     display: flex;
     justify-content: center;
     margin-top: 164.8px;
     align-items: center;
  }
</style>
